<template>
  <div style="margin-bottom: 20px">
    <div class="inputDiv">
      <el-input placeholder="请输入内容" v-model="input">
        <template slot="append"><span @click="clickBtn">全站搜索</span></template>
      </el-input>
    </div>
    <div>
      <el-row>
        <el-col :span="6">
          <div class="bock">
            <div class="d1">全部咨询</div>
            <div class="d1">
              <img src="../assets/zcfg.png" alt="" />
              政策法规
            </div>
            <div
              :class="
                !zcfg
                  ? active[0] == '0' || $route.path == '/zcfg'
                    ? 'd2 active'
                    : 'd2'
                  : active[0] == '0'
                  ? 'd2 active'
                  : 'd2'
              "
              @click="clickBock(0)"
            >
              <span
                :class="
                  !zcfg
                    ? active[0] == '0' || $route.path == '/zcfg'
                      ? 'icon activeIcon'
                      : 'icon'
                    : active[0] == '0'
                    ? 'icon activeIcon'
                    : 'icon'
                "
              ></span
              >网络安全政策法规
            </div>

            <div
              :class="active[1] == '0' ? 'd2 active' : 'd2'"
              @click="clickBock(1)"
            >
              <span
                :class="active[1] == '0' ? 'icon activeIcon' : 'icon'"
              ></span
              >网络安全政策法规
            </div>
            <div class="d1">
              <img src="../assets/xxtb-2.png" alt="" />
              信息通报
            </div>
            <div
              :class="
                !zcfg
                  ? active[2] == '0' || $route.path == '/xxtb'
                    ? 'd2 active'
                    : 'd2'
                  : active[2] == '0'
                  ? 'd2 active'
                  : 'd2'
              "
              @click="clickBock(2)"
            >
              <span
                :class="
                  !zcfg
                    ? active[2] == '0' || $route.path == '/xxtb'
                      ? 'icon activeIcon'
                      : 'icon'
                    : active[2] == '0'
                    ? 'icon activeIcon'
                    : 'icon'
                "
              ></span
              >安全事件通报
            </div>
            <div
              :class="active[3] == '0' ? 'd2 active' : 'd2'"
              @click="clickBock(3)"
            >
              <span
                :class="active[3] == '0' ? 'icon activeIcon' : 'icon'"
              ></span
              >预警通报
            </div>
            <div class="d1">
              <img src="../assets/zzdt.png" alt="" />
              工作动态
            </div>
            <div
              :class="
                !zcfg
                  ? active[4] == '0' || $route.path == '/zzdt'
                    ? 'd2 active'
                    : 'd2'
                  : active[4] == '0'
                  ? 'd2 active'
                  : 'd2'
              "
              @click="clickBock(4)"
            >
              <span
                :class="
                  !zcfg
                    ? active[4] == '0' || $route.path == '/zzdt'
                      ? 'icon activeIcon'
                      : 'icon'
                    : active[4] == '0'
                    ? 'icon activeIcon'
                    : 'icon'
                "
              ></span
              >网络安全动态
            </div>
            <div
              :class="active[5] == '0' ? 'd2 active' : 'd2'"
              @click="clickBock(5)"
            >
              <span
                :class="active[5] == '0' ? 'icon activeIcon' : 'icon'"
              ></span
              >国家网络安全动态
            </div>
            <div class="d1">
              <img src="../assets/aqxc-2.png" alt="" />
              安全宣传
            </div>
            <div
              :class="
                !zcfg
                  ? active[6] == '0' || $route.path == '/aqxc'
                    ? 'd2 active'
                    : 'd2'
                  : active[6] == '0'
                  ? 'd2 active'
                  : 'd2'
              "
              @click="clickBock(6)"
            >
              <span
                :class="
                  !zcfg
                    ? active[6] == '0' || $route.path == '/aqxc'
                      ? 'icon activeIcon'
                      : 'icon'
                    : active[6] == '0'
                    ? 'icon activeIcon'
                    : 'icon'
                "
              ></span
              >安全教育宣传
            </div>
            <div
              :class="active[7] == '0' ? 'd2 active' : 'd2'"
              @click="clickBock(7)"
            >
              <span
                :class="active[7] == '0' ? 'icon activeIcon' : 'icon'"
              ></span
              >安全意识宣传
            </div>
            <div class="d1">
              <img src="../assets/bszn-2.png" alt="" />
              办事指南
            </div>
            <div
              :class="
                !zcfg
                  ? active[8] == '0' || $route.path == '/bszn'
                    ? 'd2 active'
                    : 'd2'
                  : active[8] == '0'
                  ? 'd2 active'
                  : 'd2'
              "
              @click="clickBock(8)"
            >
              <span
                :class="
                  !zcfg
                    ? active[8] == '0' || $route.path == '/bszn'
                      ? 'icon activeIcon'
                      : 'icon'
                    : active[8] == '0'
                    ? 'icon activeIcon'
                    : 'icon'
                "
              ></span
              >办事指南
            </div>
            <div
              :class="active[9] == '0' ? 'd2 active' : 'd2'"
              @click="clickBock(9)"
            >
              <span
                :class="active[9] == '0' ? 'icon activeIcon' : 'icon'"
              ></span
              >操作指南
            </div>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="bock2">
            <div class="bock2Div">
              <span class="s1"
                >全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级…全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级</span
              >
              <span class="s2">2025-02-25</span>
            </div>
            <div class="bock2Div">
              <span class="s1"
                >全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级…全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级</span
              >
              <span class="s2">2025-02-25</span>
            </div>
            <div class="bock2Div">
              <span class="s1"
                >全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级…全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级</span
              >
              <span class="s2">2025-02-25</span>
            </div>
            <div class="bock2Div">
              <span class="s1"
                >全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级…全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级</span
              >
              <span class="s2">2025-02-25</span>
            </div>
            <div class="bock2Div">
              <span class="s1"
                >全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级…全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级</span
              >
              <span class="s2">2025-02-25</span>
            </div>
            <div class="bock2Div">
              <span class="s1"
                >全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级…全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级</span
              >
              <span class="s2">2025-02-25</span>
            </div>
            <div class="bock2Div">
              <span class="s1"
                >全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级…全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级</span
              >
              <span class="s2">2025-02-25</span>
            </div>
            <div class="bock2Div">
              <span class="s1"
                >全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级…全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级</span
              >
              <span class="s2">2025-02-25</span>
            </div>
            <div class="bock2Div">
              <span class="s1"
                >全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级…全省公安机关党风廉政建设会议强调：用改革精神和严的标准管党治警
                为浙江公安工作现代化提供坚强队伍保障等级</span
              >
              <span class="s2">2025-02-25</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input: "",
      zcfg: false,
      active: ["1", "1", "1", "1", "1", "1", "1", "1", "1", "1"],
    };
  },

  methods: {
    clickBock(i) {
      this.zcfg = true;
      for (var n = 0; n < this.active.length; n++) {
        if (n == i) {
          this.active[n] = "0";
        } else {
          this.active[n] = "1";
        }
        this.$set(this.active, n, this.active[n]);
      }
    },
    clickBtn(){
    
     this.$router.push('/search')
    }
   
  },
   mounted() {
      console.log("当前路由222：", this.$route.path);
    }
};
</script>
<style scoped>
.bock {
  background-color: #fff;
  padding: 36px;
  min-height: 684px;
  border-right: 1px solid rgba(204, 204, 204, 1);
}
.bock2 {
  background-color: #fff;
  min-height: 756px;
}
.bock2Div {
  position: relative;
  height: 72px;
  line-height: 72px;
  margin: 0px 20px;
  border-bottom: 1px solid rgba(204, 204, 204, 1);
}
.bock2Div span {
  display: inline-block;
}
.bock2Div .s1 {
  width: 80%;
  font-size: 16px;
  color: #333333;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 超出用省略号表示 */
}
.bock2Div .s2 {
  position: absolute;
  width: 18%;
  top: 0;
  right: 0px;
  font-size: 16px;
  color: #666666;
  text-align: right;
}
.bock .d1 {
  font-size: 20px;
  color: #666666;
  letter-spacing: 0;
  font-weight: 600;
  margin-bottom: 2.1%;
}
.bock .d2 {
  padding-left: 40px;
  height: 48px;
  line-height: 48px;
}
.bock .d2:hover {
  cursor: pointer;
  color: #0065ff;
}
.bock .active:hover {
  color: #fff;
}
.bock .active {
  background-color: #0065ff;
  color: #fff;
}
.bock .activeIcon {
  background-color: #fff !important;
}
.bock .d1 img {
  vertical-align: middle;
  margin-right: 8px;
  margin-bottom: 4px;
}
.bock .d2 .icon {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #333;
  margin-right: 4px;
}
.inputDiv {
  padding-right: 16px;
  margin: 16px 0;
}
/deep/ .el-input {
  border: 8px solid rgba(0, 101, 255, 0.3);
  border-radius: 8px;
}
/deep/ .el-input__inner {
  height: 48px;
  line-height: 48px;
  font-size: 16px;
}
/deep/ .el-input-group__append {
  background-color: #0065ff;
  border: 1px solid #0065ff;
  color: #fff;
  font-size: 18px;
  font-weight: 00;
  font-family: PingFangSC-Medium;
}
</style>